{% extends '1.html' %}
{% block content %}
<body>
    <div class="container">
        <h1>商品分类</h1>
        <div class="category-list">
            {% for data in categories_data %}
            <div class="category-card">
                <h2 class="category-title">{{ data.category.first }}</h2>
                <ul class="subcategory-list">
                    {% for subcategory in data.subcategories %}
                    <li class="subcategory-item">
                        <a href="{% url 'commodity:sencond' sencond=subcategory.second %}" class="subcategory-link">{{ subcategory.second }}</a>
                    </li>
                    {% empty %}
                    <li class="subcategory-item">暂无子分类</li>
                    {% endfor %}
                </ul>
            </div>
            {% empty %}
            <p>暂无分类数据</p>
            {% endfor %}
        </div>
    </div>


    <!-- 分类商品展示页 -->
    <div class="products-display-area">
            <h2 class="section-title">{{ current_title }}</h2>

            <div class="product-grid">
                {% for product in products %}
                    {# 将整个产品卡片包装在一个链接中，方便点击 #}
                    <a href="{% url 'commodity:details' product.id %}" class="product-card-link">
                        <div class="product-card">
                            <img src="{{ product.img.url }}" alt="{{ product.name }}" class="product-image">
                            <div class="product-info">
                                <h3 class="product-name">{{ product.name }}</h3>
                                <p class="product-price">¥{{ product.price_d }}</p>
                                <p class="product-sold">已售 {{ product.sold }}</p>
                            </div>
                        </div>
                    </a>
                {% empty %}
                    <p>该分类下暂无商品。</p>
                {% endfor %}
            </div>
        </div>
</body>
{% endblock content %}
